<template>
	<navigatorComp title="手机号" bgcColor="#121512" fontColor="#fff"></navigatorComp>

	<view class="bindPhone_attention display_flex" v-if="phoneForm.setType === 1">
		<image src="http://112.124.50.179:8888/imgs/mine/attention.png" mode=""></image>
		根据国家相关法律法规要求，请您完善手机号
	</view>

	<view class="bindPhone_box">
		<view class="bindPhone_box_item">
			<view class="bindPhone_box_item_title display_flex">原手机号</view>
			<view class="display_flex">
				<view class="placeholder value">
					{{ phoneForm.oldPhoneNumber }}
				</view>
			</view>
		</view>
		<view class="bindPhone_box_item">
			<view class="bindPhone_box_item_title display_flex">
				{{ phoneForm.setType === 1 ? '手机号' : '新手机号' }}
			</view>
			<view class="display_flex">
				<u--input
					focus
					:placeholder="`请输入${phoneForm.setType === 2 && '新'}手机号`"
					v-model.trim="phoneForm.newPhoneNumber"
					fontSize="28rpx"
					color="#fff"
					border="none"
					inputAlign="right"
					maxlength="11"
					placeholderStyle="color:#999999;font-size:28rpx;"
				></u--input>
			</view>
		</view>
		<view class="bindPhone_box_item">
			<view class="bindPhone_box_item_title display_flex">验证码</view>
			<view class="display_flex">
				<u--input
					placeholder="请输入验证码"
					v-model.trim="phoneForm.verificationCode"
					fontSize="28rpx"
					color="#fff"
					border="none"
					inputAlign="right"
					maxlength="4"
					placeholderStyle="color:#999999;font-size:28rpx;"
				></u--input>
				<u-code
					unique-key="A"
					class="get_code"
					ref="uCodeRef"
					@change="codeChange"
					start-text="获取验证码"
					changeText="Xs"
				></u-code>
				<text @tap="getCode" :text="tips" class="get_code">{{ tips }}</text>
			</view>
		</view>
	</view>

	<view class="bindPhone_btn display_flex">
		<myButton bgcColor="none" name="确定" width="400rpx" @clickBtn="handleConfirm"></myButton>
	</view>
</template>

<script setup>
import { onLoad } from '@dcloudio/uni-app';
import _ from 'lodash';
import { ref, reactive } from 'vue';
import navigatorComp from '@/components/navigator/index.vue';
import myButton from '@/components/button/index.vue';
import { registerApi, getCodeApi } from '@/API/login/login.js';
import MineApi from '@/API/mine/index.js';
const mineApi = new MineApi();

const phoneForm = reactive({
	oldPhoneNumber: '',
	newPhoneNumber: '',
	verificationCode: '',
	setType: 1 //设置类型（1:绑定手机号，2:更换手机号）
});
const tips = ref('');
const uCodeRef = ref(null);
const codeChange = async (text) => {
	tips.value = text;
};

onLoad((options) => {
	if (options.phoneNumber) {
		phoneForm.oldPhoneNumber = options.phoneNumber;
		phoneForm.setType = 2; //2:更换手机号
	}
});

const validate = () => {
	let phoneReg = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/;
	let codeReg = /\d{4}/;

	if (!phoneReg.test(phoneForm.newPhoneNumber)) {
		uni.showToast({
			title: '请输入正确的手机号',
			icon: 'none',
			duration: 1000
		});
		return false;
	} else if (phoneForm.newPhoneNumber === phoneForm.oldPhoneNumber) {
		uni.showToast({
			title: '新手机号不能与原手机号一样',
			icon: 'none',
			duration: 1000
		});
		return false;
	}  else if (!codeReg.test(phoneForm.verificationCode)) {
		uni.showToast({
			title: '请输入正确的验证码',
			icon: 'none',
			duration: 1000
		});
		return false;
	}
	return true;
};

const handleConfirm = _.throttle(function () {
	confirm();
}, 2000);

/**
 * 点击保存
 */
const confirm = () => {
	if (!validate()) {
		return;
	}
	mineApi.setPhoneNumber({ ...phoneForm }).then((res) => {
		if (res.code === 0) {
			uni.showToast({
				title: phoneForm.setType === 1 ? '保存成功' : '更换成功',
				duration: 500
			});
			setTimeout(() => {
				uni.navigateBack();
			}, 500);
		}
	});
};

// 发送验证码
const getCode = () => {
	if (phoneForm.newPhoneNumber.length != 11) {
		uni.showToast({
			title: '请输入正确的手机号',
			icon: 'none',
			duration: 1000
		});
		return;
	}
	if (uCodeRef.value.canGetCode) {
		// 模拟向后端请求验证码
		uni.showLoading({
			title: '正在获取验证码'
		});
		// console.log(formData.phoneNumber)
		setTimeout(async () => {
			uni.hideLoading();
			let rst = await getCodeApi({
				phoneNumber: phoneForm.newPhoneNumber,
				smsType: '5' //1:注册，2:登录，3:修改密码，4:身份认证，5:更换手机号
			});
			if (rst.data.code == 0) {
				// 这里此提示会被start()方法中的提示覆盖
				uni.showToast({
					title: rst.data.msg,
					icon: 'success',
					duration: 1000
				});
				// 通知验证码组件内部开始倒计时
				uCodeRef.value.start();
			} else {
				uni.showToast({
					title: rst.data.msg,
					icon: 'none',
					duration: 1000
				});
			}
		}, 2000);
	} else {
		uni.showToast({
			title: '倒计时结束后再发送',
			icon: 'error',
			duration: 1000
		});
	}
};
</script>

<style lang="scss">
page {
	background-color: #121512;
	/* #ifdef H5 */
	padding-top: 0;
	/* #endif */
}

.bindPhone_attention {
	width: 100%;
	padding: 16rpx 34rpx 16rpx 32rpx;
	box-sizing: border-box;
	background: rgba(243, 224, 187, 0.9);
	font-weight: 400;
	font-size: 28rpx;
	color: #121512;
	line-height: 33rpx;
	margin-bottom: 40rpx;
	justify-content: flex-start;
	text-align: justify;

	image {
		width: 40rpx;
		height: 40rpx;
		margin-right: 8rpx;
		flex-shrink: 0;
	}
}

.bindPhone_box {
	padding: 40rpx 32rpx;
	box-sizing: border-box;
	margin: 32rpx 40rpx;
	background: #292b2a;
	border-radius: 8rpx;

	.bindPhone_box_item {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 40rpx;

		&:last-child {
			margin-bottom: 0;
		}

		image {
			width: 32rpx;
			height: 32rpx;
			margin-left: 8rpx;
		}

		.bindPhone_box_item_title {
			font-weight: 400;
			font-size: 28rpx;
			color: #ffffff;
			line-height: 33rpx;
		}

		.placeholder {
			font-weight: 400;
			font-size: 28rpx;
			color: #999999;
			line-height: 33rpx;
		}

		.value {
			color: #ffffff;
		}

		.get_code {
			color: #f3e0bb;
			font-size: 28rpx;
			margin-left: 16rpx;
		}
	}
}

.bindPhone_btn {
	width: 100%;
	margin-top: 200rpx;
}
</style>
